<script setup lang="ts">

  import { ref } from 'vue'
  import { RouterView,useRouter } from 'vue-router'
  import { UserFilled } from '@element-plus/icons-vue'
  import { getLastLoginTime } from '@/utils/api'
  import { ElMessage } from 'element-plus';

  // 是否显示头部
  const header = ref(true)
  const router = useRouter()
  // 最后登录时间和用户名
  const beforeLoginTime = ref('')
  const userName = ref('')
  // 监听路由变化 
  let lock = true;
  router.beforeEach((to, from, next)=>{
    // 是错误页面或者认证页面
      if(to.path == '/certification' || to.path == '/error'){
        header.value = false
        next()
      }else{
        header.value = true
        // 第一次请求发送登录时间
        if(!sessionStorage.getItem('lock')){
          getLastLoginTime({userId:localStorage.getItem('loginid'),token:localStorage.getItem('token')}).then(res => {
            if(res.data.code == 200){
              sessionStorage.setItem("lock","true")
              sessionStorage.setItem("beforeLoginTime",res.data.data.currentTime)
              sessionStorage.setItem("userName",res.data.data.userName)
              beforeLoginTime.value = res.data.data.currentTime
              userName.value = res.data.data.userName
            }else{
              ElMessage({
                message : res.data.msg,
                type    : 'error',
                duration: 2 * 1000
              })
            }
            next()
          }).catch(err=>{
            ElMessage({
              message : err,
              type    : 'error',
              duration: 2 * 1000
            })
            next()
          })
        }else{
          beforeLoginTime.value = sessionStorage.getItem("beforeLoginTime") as string
          userName.value = sessionStorage.getItem("userName") as string
          next()
        }
      } 
  })
  // 获取url参数
  import { getUrlParams } from '@/utils/func'
  const params = getUrlParams()
  // http://localhost:5174/?shopId=6666#/certification
  // 保存参数
  if(!!params.shopId){
    sessionStorage.setItem('shopId',params.shopId)
    if(params.merchantName){
      sessionStorage.setItem('merchantName',params.merchantName)
    }
    if(params.createType){
      sessionStorage.setItem('createType',params.createType)
    }
  }else{
    // 如果token则刷新页面
    if(params.token){
        localStorage.setItem('token',params.token)
        localStorage.setItem('loginid',params.loginid)
        localStorage.setItem('flag',"1")
        window.location.href = window.location.href.split('?')[0]
    } else{
        localStorage.setItem('flag',"0")
    }
  }
</script>
<template>
  <el-container>
    <el-header class="flex flex-jus-start" v-if="header">
      <div class="userico flex">
        <UserFilled style="width: 35px; color:white;" />
      </div>
      <dl class="c-white m-l-15">
        <dt class="f24">您好,{{ userName }}</dt>
        <dd class="f16 o7 m-t-5">
          上次登录: {{ beforeLoginTime }}
        </dd>
      </dl>
    </el-header>
    <el-main>
      <RouterView />
    </el-main>
  </el-container>
</template>

<style scoped>
header {
  height:100px;
  background-color: #047bcc;
}
.userico {
  background-color: skyblue;
  width: 55px;
  height:55px;
  border-radius: 1000px;
}

</style>